import React, {useEffect, useState} from 'react';
import {Form, Input, Modal, Select, TreeSelect} from 'antd';
import {Job, Role, UserListItem} from "@/pages/system/user/constant";
import {apiGetRoleList} from "@/apis/role";
import {apiGetJobList} from "@/apis/job";
import {apiGetOrganizationList} from "@/apis/organization";

export interface CreateFormProps {
  onCancel: () => void;
  onSubmit: (values: Role) => void;
  createModalVisible: boolean;
}

const FormItem = Form.Item;

const formLayout = {
  labelCol: {span: 7},
  wrapperCol: {span: 13},
};

const CreateRoleForm: React.FC<CreateFormProps> = (props) => {

  const [form] = Form.useForm();
  const [jobList, setJobList] = useState<Job[]>([]);
  const [roleList, setRoleList] = useState<Role[]>([]);
  const [organizationList, setOrganizationList] = useState<any[]>([]);
  const {onSubmit, onCancel, createModalVisible} = props;

  useEffect(() => {
    if (form && !createModalVisible) {
      form.resetFields();
    } else {
      querySelectAllData().then(r => r)
    }
  }, [props.createModalVisible]);

  const querySelectAllData = async () => {
    const roleRes = await apiGetRoleList({}, true)
    const jobRes = await apiGetJobList({}, true)
    const orgRes = await apiGetOrganizationList({}, true)
    setJobList(jobRes.data)
    setRoleList(roleRes.data)
    setOrganizationList(orgRes.data)
  }

  const handleSubmit = () => {
    if (!form) return;
    form.submit();
  };

  const handleFinish = (values: Role) => {
    if (onSubmit) {
      // values.deptId=Number(selectedKey)
      onSubmit(values);
    }
  };

  const onSelect = (a: any, b: any) => {
    console.log('selected', a, b);
  };

  const onChange = (value: any, info: any) => {
    console.log('onChange', value, info);
  };

  const renderContent = () => {
    return (
      <>
        <FormItem name="name" label="角色名称">
          <Input id="update-name" placeholder={'请输入角色名称'}/>
        </FormItem>
        <FormItem name="remark" label="备注">
          <Input.TextArea id="update-remark" placeholder={'请输入备注'} rows={4}/>
        </FormItem>

        <FormItem name="deptId" label="部门">
          <TreeSelect
            style={{width: '100%'}}
            dropdownStyle={{maxHeight: 400, overflow: 'auto'}}
            treeData={organizationList}
            placeholder="请选择部门"
            treeDefaultExpandAll
            treeCheckable
            virtual
            autoClearSearchValue
            onChange={onChange}
            onSelect={onSelect}
          />
        </FormItem>
        <FormItem name="jobId" label="职位">
          <Select id="jobId" placeholder={'请选择职位'}>
            {jobList.map(r => <Select.Option value={r.id}>{r.jobName}</Select.Option>)}
          </Select>
        </FormItem>
        <FormItem name="roleId" label="角色">
          <Select id="roleId" placeholder={'请选择角色'}>
            {roleList.map(r => <Select.Option value={r.id}>{r.roleName}</Select.Option>)}
          </Select>
        </FormItem>
        <FormItem name="name" label="用户名">
          <Input id="update-name" placeholder={'请输入用户名'}/>
        </FormItem>
        <FormItem name="nickName" label="昵称">
          <Input id="update-nick_name" placeholder={'请输入昵称'}/>
        </FormItem>
        <FormItem name="mobile" label="手机号">
          <Input id="update-mobile" placeholder={'请输入手机号'}/>
        </FormItem>
        <FormItem name="email" label="邮箱">
          <Input id="update-email" placeholder={'请输入邮箱'}/>
        </FormItem>
      </>
    );
  };

  return (
    <Modal
      forceRender
      destroyOnClose
      title="新建角色"
      visible={createModalVisible}
      okText={'保存'}
      onOk={handleSubmit}
      onCancel={onCancel}
    >
      <Form
        {...formLayout}
        form={form}
        onFinish={handleFinish}
      >
        {renderContent()}
      </Form>
    </Modal>
  );
}

export default CreateRoleForm;
